<template>
  <div class="term_frame">
    <div ref="xterm" class="xterm_div">

    </div>
  </div>
</template>

<script>
import 'xterm/css/xterm.css'
import { Terminal } from 'xterm'
import { FitAddon } from 'xterm-addon-fit'
export default {
name:'YTerm',
data(){
return {
    xterm:null,
    fitAddon:null
}
},
mounted(){
    setTimeout(()=>{this.__initTerm()},200)
},
updated(){
},
methods:{
    __initTerm() {
      // 1.xterm终端初始化
      const term = new Terminal({
        rendererType: "canvas", //渲染类型
        rows: 40, //行数
        cols: 100, // 不指定行数，自动回车后光标从下一行开始
        convertEol: true, //启用时，光标将设置为下一行的开头
        // scrollback: 50, //终端中的回滚量
        disableStdin: false, //是否应禁用输入
        windowsMode: true, // 根据窗口换行
        cursorStyle: "underline", //光标样式
        cursorBlink: true, //光标闪烁
        theme: {
          foreground: "#ECECEC", //字体
          background: "#000000", //背景色
          cursor: "help", //设置光标
          lineHeight: 20,
        },
      });
      this.xterm = term
      const fitAddon = new FitAddon()
      this.fitAddon = fitAddon
      term.loadAddon(fitAddon);
      term.open(this.$refs.xterm)
      term.prompt = () => {
        term.writeln("")
        term.write("$")
      }
      term.write("xxx$")
      term.onKey(e => {
        const printable = !e.domEvent.altKey && !e.domEvent.altGraphKey && !e.domEvent.ctrlKey && !e.domEvent.metaKey
        if (e.domEvent.keyCode === 13) {
          term.prompt()
        } else if (e.domEvent.keyCode === 8) { // back 删除的情况
          if (term._core.buffer.x > 2) {
            term.write(' ')
          }
        } else if (printable) {
          term.write(e.key)
        }
      })
}
}
}
</script>

<style>
.term_frame{
    width:100%;
    height:100%
}
.xterm_div{
    width:100%;
    height:100%
}
</style>